<template>
  <div class="item">
    <div class="imgWrapper">
      <img :src="data.images[0]" />
    </div>
    <div class="detail">
      <h4 class="name">{{ data.name }}</h4>
      <div class="sum">{{ data.mens }}人班组</div>
      <el-rate :value="data.level" disabled></el-rate>
    </div>
  </div>
</template>

<script>
import LazyLoad from '@/base/lazy-load/lazy-load'

export default {
  name: 'GroupCard',
  data() {
    return {
      level: 1
    }
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    LazyLoad
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
.el-icon-star-on{
  height 14px
}
.item
  width: 230px
  height: 242px
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3)
  text-align: center
  background: #FFF
  .imgWrapper
    width: 100%
    height: 172px
    background-color: $color-info
    cursor: pointer
    img
      height: 100%
  .detail
    justify-content: center
    height: calc(100% -  240px)
    .name
      font-size: 18px
      padding: 5px 0
    .sum
      text-align: center
      padding: 5px 0
      font-size 14px

.img
  height: 100%
</style>
